let form = layui.form;

// 打开页面第一步,先获取后台数据,渲染页面
function renderCategory() {
  $.ajax({
    type: "GET",
    url: "/my/article/cates",
    success: function (res) {
      // console.log(res);
      if (res.status === 0) {
        //需要使用模板引擎,把获取的数据渲染到页面上
        let htmlStr = template("tpl-list", res);
        //把组合好的数据铺到父盒子中
        $("tbody").html(htmlStr);
      }
    },
  });
}
renderCategory();

//点击添加类别按钮,出现弹窗
//首先绑定事件点击事件,
let addIndex;//两个函数都要用,就把变量提升一下
$('button:contains("添加类别")').on("click", function () {
  //点击事件触发后,会出现弹窗,和它的全部结构
   addIndex=layer.open({
    type: 1,
    title: "添加文章类别",
    content: $("#tpl-add").html(),
    area: ["500px", "250px"],
  });
});

//下一步,点击确认添加,表单中的信息传送到后台,提交数据
//因为这个按钮是在js中生成的,不可能直接获取,所以需要事件委托
$('body').on('submit','#add-form',function(e){
e.preventDefault();
// console.log(123);打印成功,证明传递事件成功
$.ajax({
  type:'POST',
  url:'/my/article/addcates',
  data:$(this).serialize(),
  success:function(res){
    layer.msg(res.message);
    if(res.status === 0){
      renderCategory();
      //关闭弹窗 需要跟计时器一样,直到计时器的名字,因为是在两个函数中用,所以需要提升一下变量
      layer.close(addIndex);//碳层有好多个,写上名字能确定关闭哪一个
    }
  }
})

})






//点击编辑,出现修改弹窗层
let editIndex;
$('tbody').on("click", 'button:contains("编辑")',function () {
  //点击事件触发后,会出现弹窗,和它的全部结构
let data = $(this).data();  //iq的data方法是jquery封装的方法，专门用于获取元素的 data-xxx 属性值
//也可以使用另外一种方法 let id = $(this).attr('data-id');
// console.log(data);
editIndex = layer.open({
    type: 1,
    title: "修改文章类别",
    content: $("#tpl-edit").html(),
    area: ["500px", "250px"],
    //弹层出现之后,执行success函数,完成数据回填,这个是layui的success属性
    success:function(){
      //这里会用到form表单,需要在文档开头声明一个form
      //还需要把目标form的 lay-filter="abc"  还需要定义一个data
      form.val("abc", data);
    }
  });
});


//最后完成数据的编辑,收集表单数据上传并渲染到页面
//事件委托
$('body').on('submit','#edit-form',function(e){
  e.preventDefault();
  //为啥要用这个方法 data是不是重复了
  let data = $(this).serializeArray();//转化出来是一个数组形式的

  //-----------------这个可以--------
  //用sum代替id的下角标,这样就不局限与下角标为2
  // var summ = data.findIndex((data)=>(data.name == 'id'))
  // console.log(summ);

//---------------------完全不靠谱的方法----------------
  // var abc = data.findIndex(function(data){
  //   return data.mane == 'id';
  // })
  // console.log(abc);

  //------------换一个试试---------
  // function getindex(data){
  //   return data.name == 'id'
  // }
  // console.log(data.findIndex(getindex));



  // let data = $(this).serialize(); //转化出来是一个字符串
  console.log(data);
  //返回值中id中的i为答谢
  data[2].name = 'Id';  //这个跟上一行let data = $(this).serializeArray();是配合使用的
  $.ajax({
    type:'POST',
    url:"/my/article/updatecate",
    data:data,
    success:function(res){
      layer.msg(res.message);
      if (res.status === 0){
        renderCategory();
        layer.close(editIndex);
      }
    }
  })
})









//删除 必须使用事件委托
$('tbody').on('click', 'button:contains("删除")', function (){
  console.log(123);
  //获取分类信息的id值是一个难点
  let id = $(this).data('id');
  // console.log(id);
  layer.confirm('你确定删除吗？',  function(index){
    //do something
    //data方法,是iq的一个方法
    $.ajax({
      // type:'GET',
      ///my/article/deletecate/:id 这个格式的意思就是要在请求地址之后加上真正的id
      url:'/my/article/deletecate/' + id,
      success:function(res){
        layer.msg(res.message);
        if(res.status === 0){
          renderCategory();
        }
      }
    })
    layer.close(index);
  });
})
